<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/jquery-3.6.1.min.js"></script>
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">



</head>
<body>
<div style="right: 50px;width: 300px">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="preAdd();">
        新增学生
    </button>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">编辑学生信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!--模态框内容-->
                <form id="formStudent">
                    <input  hidden="hidden" id="id" name="id"/>
                    <div class="mb-3">
                        <label class="form-label">学号:</label>
                        <input type="text" class="form-control" id="sno" name="sno">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">姓名：</label>
                        <input type="text" class="form-control" id="sname" name="sname">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">性别：</label>
                        <select class="form-select" id="sex" name="sex">
                            <option value="0">未知</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">年龄:</label>
                        <input type="text" class="form-control" id="age" name="age">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">密码:</label>
                        <input type="text" class="form-control" id="password" name="password">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">所在专业:</label>
                        <input type="text" class="form-control" id="dept" name="dept">
                    </div>
                </form>
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-primary" onclick="saveStudent();">提交修改</button>
            </div>
        </div>
    </div>
</div>
<div class = "container-fluid">
    <table class="table table-striped" id = "stuTable">
    </table>

    <form id="searchForm">
        <div class="input-group mb-3">
            <select class="form-select" id="searchOption" name="searchOption">
                <option value = "10">以学号查询</option>
                <option value = "11">以姓名查询</option>
                <option value = "12">以性别查询</option>
                <option value = "13">以专业查询</option>
            </select>
            <input name="name" id="name" type="text" placeholder="请输入" class="w-50 form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
            <button type="button" class="btn btn-outline-secondary" onclick="searchStudent();"> 查询 </button>
        </div>
    </form>

    <table class="table table-dark table-striped" id="studentTb2">

    </table>

</div>

<script src="/js/bootstrap.min.js"></script>

<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript">
    function search(){

        $('#stuTable').bootstrapTable("destroy");
        loadTable();
    }

    function searchStudent(){

        $('#studentTb2').bootstrapTable("destroy");

        var searchOption = $("#searchOption").val();

        var name = $("#name").val();

        var searchMatching = $("#searchMatching").val();

        $("#studentTb2").bootstrapTable({
            url: '/administrator/searchStudent',
            striped: true, //隔行变色
            pagination: true, //底部显示分页条
            singleSelect: false, //禁止多选
            pageSize:4, //每一页有几条数据
            pageNumber:1, //设置了分页，首页页码
            sidePagination: "server", //设置在何处分页，可选值为client或者server
            queryParams: function (params){
                var paraObj = {
                    size: params.limit,
                    page:params.offset/params.limit,
                    sort:"id",
                    direct:"asc",
                    pageNum:this.pageNumber,
                    name:name+"!"+searchOption+"!"+searchMatching,
                };
                return paraObj;
            },
            columns: [{
                field: 'id',
                title: '序号',
                width: 50
            }, {
                field: 'sno',
                title: '学号',
                width: 130
            }, {
                field: 'sname',
                title: '姓名',
                width: 100
            }, {
                field: 'sex',
                title: '性别',
                width: 30
            }, {
                field: 'age',
                title: '年龄',
                width: 10,
            }, {
                field: 'password',
                title: '密码',
                width: 50,
            }, {
                field: 'dept',
                title: '所在专业',
                width: 50,
            } ,{
                title: '处理',
                field: 'sno',
                width: 70,
                formatter: chuliFormatter
            }],
            responseHandler: function (res){
                console.log(res);
                return {
                    "total":res.data.total,
                    "rows":res.data.rows
                };
            },
        })
    }



    function loadTable(){

        $('#stuTable').bootstrapTable({
            url: '/administrator/displayListStudent',
            striped: true, //隔行变色
            pagination: true, //底部显示分页条
            singleSelect: false, //禁止多选
            pageSize:5, //每一页有几条数据
            pageNumber:1, //设置了分页，首页页码
            sidePagination: "server", //设置在何处分页，可选值为client或者server
            queryParams: function (params){
                var paraObj = {
                    size: params.limit,
                    page:params.offset/params.limit,
                    sort:"id",
                    direct:"desc",
                    pageNum:this.pageNumber,
                };
                return paraObj;
            },
            columns: [{
                field: 'id',
                title: '序号',
                width: 50
            }, {
                field: 'sno',
                title: '学号',
                width: 130
            }, {
                field: 'sname',
                title: '姓名',
                width: 100
            }, {
                field: 'sex',
                title: '性别',
                width: 30
            }, {
                field: 'age',
                title: '年龄',
                width: 10,
            }, {
                field: 'password',
                title: '密码',
                width: 50,
            }, {
                field: 'dept',
                title: '所在专业',
                width: 50,
            } ,{
                title: '处理',
                field: 'sno',
                width: 70,
                formatter: chuliFormatter
            }],
            responseHandler: function (res){
                console.log(res);
                return {
                    "total":res.data.total,
                    "rows":res.data.rows
                };
            },
        })

    }
    function chuliFormatter(value){
        return "<a href='#' onclick='editStudent("+value+");' style='color: pink'>编辑</a>  <a href='#'  onclick='deleteStudent("
            +value+")' style='color: pink'>删除</a>"
    }
    function editStudent(sno){
        $("#exampleModal").modal('show')

        $.ajax({
            url:'/administrator/getStudent/'+sno
        }).done(function(rs){
            $("#id").val(rs.id);
            $("#sname").val(rs.sname);
            $("#sno").val(rs.sno);
            $("#age").val(rs.age);
            $("#dept").val(rs.dept);
            $("#password").val(rs.password);
            if (rs.sex === "女"){
                $("#sex").val("2");
            } else {
                $("#sex").val("1");
            }
        })
    }

    function saveStudent(){
        var data = $("#formStudent").serialize();
        var id = $("#id").val();

        if (id < 1){
            $.ajax({
                url:'/administrator/insertStudent',
                method:"POST",
                data:data
            }).done(function (){
                $("#studentTb2").bootstrapTable("destroy");
                $("#stuTable").bootstrapTable("destroy");
                loadTable();
                search();
                $("#exampleModal").modal('hide');
            })
        } else {
            $.ajax({
                url:'/administrator/updateStudent',
                method:"PUT",
                data:data
            }).done(function(){
                $("#studentTb2").bootstrapTable("destroy");
                $("#stuTable").bootstrapTable("destroy");
                loadTable();
                search();
                $("#exampleModal").modal('hide');
            })
        }
    }

    function deleteStudent(sno){

        if(confirm("确认删除?")){
            $.ajax({
                url:"/administrator/deleteStudent/"+sno,
                method:"DELETE"
            }).done(function (){
                $('#stuTable').bootstrapTable("destroy");
                loadTable();
            });
        }

    }

    function preAdd(){
        $("#id").val("");
        $("#sname").val("");
        $("#sno").val("");
        $("#age").val("");
        $("#dept").val("");
        $("#password").val("");
        $("#sex").val("0")
        $("#id").val(0);
    }

    function login_jump(){
        $.ajax({
            url:'/administrator/displayListStudent'
        }).done(function(rs){
            if(rs==null){
                window.location.href="/login";
            }
        })
    }
    $(function (){
        login_jump();
        loadTable();
    });

</script>



</body>
</html>